
var GuaranteeWay = Ext.data.Record.create([   
	{ name : 'guaranteeWay.id',     mapping : 'id',     type : 'int'}, 	
	{ name : 'guaranteeWay.name',   mapping : 'name',   type : 'string'},
	{ name : 'guaranteeWay.num',	mapping : 'num',	type : 'int'}
]);


//担保方式列表，Grid的列模型（ColumnModel）的默认实现。
var cm_guaranteeWay = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer()/*表格前的行号*/, {
	header : '担保方式名称',
	width : 200,
	sortable : true,
	dataIndex : 'guaranteeWay.name'
}, {
	header : '担保方式代码',
	width : 200,
	sortable : true,
	dataIndex : 'guaranteeWay.num'
}]);


// 构造器函数
var MyPanel = function(config) {
    Ext.apply(this, { 
        // 在这里设定预配置的参数项
 		labelWidth : 100, 
		labelAlign : 'right',		
			
		border : false,        //是否显示出面板body元素的 边框（缺省为true
		baseCls : 'x-plain',   //作用在面板元素上的CSS样式类 （默认为 'x-panel'）。
		bodyStyle : 'padding:5px 5px 0',//制定body元素的CSS样式。格式形如Ext.ElementapplyStyles（缺省为null）。
		anchor : '100%',         //this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager。 
	
		defaults : {            //应用在全体组件上的配置项
			width : 233,
			msgTarget : 'qtip'      // 验证信息（包括错误信息）在框附近显示，另外side 在右边显示，under在底部显示
		},
		defaultType : 'textfield', //设置 items里 容器的默认类型
		items : [{
			
			xtype : 'hidden',     //表示此属性为隐藏，一般每张表的id都是隐藏属性，用来操作表数据
			name : 'guaranteeWay.id'
		
		}, {
			fieldLabel : '担保方式名称',
			id : 'guaranteeWayNameAdd',
			name : 'guaranteeWay.name',//name字段为什么要这么写不用我多说了吧，（不懂去看看struts）
			allowBlank : false,  //是否允许为空
			maxLength : 10
		}, {
			fieldLabel : '担保方式代码',
			name : 'guaranteeWay.num',
			xtype : 'numberfield',
			allowNegative : false,
			allowDecimals : false, 
			minValue : 1,  
			maxValue : 20,
			maskRe : /\d/, //阻止输入符号和小数点
			allowBlank : false
		}]
    });
    MyPanel.superclass.constructor.apply(this, arguments);
};
// My Panel继承了Ext.FormPanel
Ext.extend(MyPanel, Ext.FormPanel, {});
 
 

//添加担保方式的表单
var addGuaranteeWayForm = new MyPanel({
		url : 'saveGuaranteeWay.action',	
	
		buttonAlign : 'right',
		minButtonWidth : 60,
		buttons : [{
			text : '添加',  
			handler : function(btn) {
				var frm = addGuaranteeWayForm.getForm();
				
				if (frm.isValid()) {// 验证表单各字段是否 符合要求
					btn.disable();  //使 此 添加 按钮不可用，防止重复提交
					var cnfield = frm.findField('guaranteeWay.name'); // 获得担保方式名称 ,用于下面的错误提示
					
					frm.submit({   //提交表单
						waitTitle : '请稍候',
						waitMsg : '正在提交表单数据,请稍候...',
						
						success : function(form, action) { //如果 数据 添加 成功
							var store = grid_guaranteeWay.getStore(); //获得现在 grid_guaranteeWay的表格（），用于刷新表格
							if (store.data.length <= 20) { //这里把数据定为20不太好，如果分页查询，每页不是20个数据，程序中要改的地方就很多了
								var guaranteeWay = new GuaranteeWay({//获得刚提交的数据，用来刷新表格， 这样有点麻烦，还没有想到更好的实现方式。
									'guaranteeWay.id' : action.result.id,
									'guaranteeWay.name' : form.findField('guaranteeWay.name').getValue(),
									'guaranteeWay.num' : form.findField('guaranteeWay.num').getValue()
								});
								store.insert(0, [guaranteeWay]);//在客户端表格第一行插入新添加的数据
								if (store.data.length > 20) {//如果刚才表格数据是满页的（这里为20条），把store（表格）最后一条数据去掉
									store.remove(store.getAt(store.data.length - 1));
								}
							}
							Ext.Msg.alert('成功提示', '数据插入成功!!<br>'); //各种提示框 详见 文档MessageBox里
							btn.enable();//把按钮恢复可用。
							window_add_guaranteeWay.hide();
						},
						failure : function() {
							Ext.Msg.show({//如果插入失败，弹出 错误提示框。
								title : '错误提示',
								msg : '担保方式名称或代码已存在!\n请勿重复添加!',
								buttons : Ext.Msg.OK,
								fn : function() {
									cnfield.focus(true);
									btn.enable();//把按钮恢复可用。
								},
								icon : Ext.Msg.ERROR
							});
						}
					});
				}
			}
		}, {
			text : '重置',
			handler : function() {
				addGuaranteeWayForm.getForm().reset();
			}
		}, {
			text : '取消',
			handler : function() {
				window_add_guaranteeWay.hide();
			}
		}]
	});


//添加担保方式的弹出窗
var window_add_guaranteeWay = new Ext.Window({ 
	title : '添加担保方式',
	width : 400,
	resizable : false,
	autoHeight : true,
	modal : true,//True 表示当window显示时对其后面的一切内容进行遮罩，默认false
	closeAction : 'hide',//当关闭按钮被点击时执行的动作。“close”缺省的动作是从DOM树中移除window并彻底加以销毁。“hide” 只是在视觉上通过偏移到零下(negative)的区域的手法来隐藏，这样使得window可通过show 的方法再显示.
	listeners : {//此处用于 再显示上面隐藏的 窗体， 与  closeAction ： ‘hide’ 配合使用。
		'hide' : function() {
			this.setTitle('添加担保方式');
			this.findById('guaranteeWayNameAdd').ownerCt.getForm().reset();//监听窗口，用于再现窗口
		}
	},
	items : [addGuaranteeWayForm]
});


//更新担保方式 表单  ，从 window里分离出来的
var updateGuaranteeWayForm = new MyPanel({
				
		url : 'updateGuaranteeWay.action',
		
		buttonAlign : 'right',
		minButtonWidth : 60,
		buttons : [{
			text : '修改', 
			handler : function(btn) {
				var frm = updateGuaranteeWayForm.getForm();
				if (frm.isValid()) {
					btn.disable(); 
					var cnfield1 = frm.findField('guaranteeWay.name'); 
					
					frm.submit({  
						waitTitle : '请稍候',
						waitMsg : '正在提交表单数据,请稍候...',
						
						success : function(form, action) { //如果 数据 添加 成功	
							Ext.Msg.show({    //弹出成功提示框
							title : '成功提示',
							msg : '数据修改成功!',
							buttons : Ext.Msg.OK,
							fn : function(){btn.enable()},
							icon : Ext.Msg.INFO
						});
									
							var store = grid_guaranteeWay.getStore(); 
							var guaranteeWay = new GuaranteeWay({    
								'guaranteeWay.id' : form.findField('guaranteeWay.id').getValue(),//action.result.id,
								'guaranteeWay.name' : form.findField('guaranteeWay.name').getValue(),
								'guaranteeWay.num' : form.findField('guaranteeWay.num').getValue()
							});
							var index = store.indexOf(grid_guaranteeWay.getSelectionModel().getSelected());  //的到选中数据的行号
							store.remove(grid_guaranteeWay.getSelectionModel().getSelected());//把选中数据从表中去除
							store.insert(index,guaranteeWay);					//插入修改后的新数据
							grid_guaranteeWay.getSelectionModel().selectRow(index);  //
							
							btn.enable();//把按钮恢复可用。
							window_update_guaranteeWay.hide();
						},
						failure : function() {
							Ext.Msg.show({ 
								title : '错误提示',
								msg : '修改失败!\n担保方式名称或代码已存在!',
								buttons : Ext.Msg.OK,
								fn : function() {
									cnfield1.focus(true);
									btn.enable();
								},
								icon : Ext.Msg.ERROR
							});
						}
					});
				}
			}
		}, {
			text : '取消',
			handler : function() {
				window_update_guaranteeWay.hide();
			}
		} ]
});

//修改担保方式的弹出窗  （此表格和上边添加 表格是一样的，只有部分修改）
var window_update_guaranteeWay = new Ext.Window({ 
	title : '修改担保方式',
	width : 400,
	resizable : false, 
	autoHeight : true, 
	modal : true, 
	closeAction : 'hide', 
		
	items : [updateGuaranteeWayForm]	
});


//添加担保方式按钮 ， 点击 弹出添加 窗口
var btn_add_guaranteeWay = new Ext.Button({
	text : '添加担保方式',
	iconCls : 'icon-add', 
	handler : function() {
		window_add_guaranteeWay.show();  
	}
});


//修改担保方式按钮
var btn_update_guaranteeWay = new Ext.Button({
	text : '修改担保方式',
	iconCls : 'icon-edit',
	handler : function(){
		var recordGuaranteeWay = grid_guaranteeWay.getSelectionModel().getSelected();//获得选中行的数据，请仔细看看如何获得的
		if(recordGuaranteeWay){  //如果有选中数据
			window_update_guaranteeWay.show();   //弹出  修改数据窗口
			updateGuaranteeWayForm.getForm().loadRecord(recordGuaranteeWay);//将刚才选中的数据加到弹出窗口的表单里
		}
		else{
			Ext.Msg.alert('修改提示','请先选择要修改的数据!<br>')
		}
	}
});



//删除担保方式 按钮 ，及实现
var btn_del_guaranteeWay = new Ext.Button({
	text : '删除担保方式',
	iconCls : 'icon-del',
	handler : function() {
		var record = grid_guaranteeWay.getSelectionModel().getSelected();   
		if (record) {
			var id = grid_guaranteeWay.getSelectionModel().getSelected().get("guaranteeWay.id");// 获得选中行数据的id
			Ext.Msg.confirm('确认删除', '你确定删除该条记录?', function(btn) {
				if (btn == 'yes') {
					Ext.Ajax.request({
						url : 'deleteGuaranteeWay.action',
						params : {
							id : id  
						},
						success : function() {   
							grid_guaranteeWay.getStore().remove(record);
						},
						failure : function() {
							Ext.Msg.show({
								title : '错误提示',
								msg : '删除时发生错误!',
								buttons : Ext.Msg.OK,
								icon : Ext.Msg.ERROR
							});
						}
					});
				}
			});
		}
		else{
			Ext.Msg.alert('提示信息','请先选中要删除的数据!<br>')
		}
	}
});


//搜索 担保方式 文本框 
var text_search_guaranteeWay = new Ext.form.TextField({
	name : 'textSearchGuaranteeWay',
	width : 200,
	emptyText : '多个条件可用空格隔开!',
	listeners : {
		'specialkey' : function(field, e) {
			if (e.getKey() == Ext.EventObject.ENTER) {
				searchGuaranteeWay();
			}
		}
	}
});


var searchGuaranteeWay = function() {
	ds_guaranteeWay.baseParams.conditions = text_search_guaranteeWay.getValue();
	ds_guaranteeWay.load({
		params : {   
			start : 0,
			limit : 20
		}
	});
}

// 搜索 担保方式 按钮
var btn_search_guaranteeWay = new Ext.Button({
	text : '查询',
	iconCls : 'icon-search',
	handler : searchGuaranteeWay 
});


//要传输 和读取的数据格式，从后台传来的数据 保存的数据表单 ，通过这里进行缓存和转换 ，这是数据入口函数 ，  这里为json数据格式，我们项目中也用json数据。 详细见帮助文档 Ext.data.Store
var ds_guaranteeWay = new Ext.data.Store({
	proxy : new Ext.data.HttpProxy({  
		url : 'findAllGuaranteeWay.action'
	}),
	reader : new Ext.data.JsonReader({  
		totalProperty : 'totalProperty',
		root : 'root'     
	}, GuaranteeWay  
	)
});



// 担保方式管理 最外层的可编辑的面板（panel）
var grid_guaranteeWay = new Ext.grid.EditorGridPanel({  
	title : '担保方式管理',
	iconCls : 'icon-grid',
	loadMask : {msg : '数据加载中...'},
	region : 'center',
	cm : cm_guaranteeWay,  
	ds : ds_guaranteeWay, 
	
	sm : new Ext.grid.RowSelectionModel({singleSelect : true}), //选中 哪一行数据
	enableColumnMove : false, 
	trackMouseOver : false,  
	frame : true,      	
	clicksToEdit : 2,  	
	tbar : [btn_add_guaranteeWay, '-',btn_update_guaranteeWay, '-', btn_del_guaranteeWay, '-', text_search_guaranteeWay, btn_search_guaranteeWay],
	bbar : new Ext.PagingToolbar({
		pageSize : 20,
		store : ds_guaranteeWay,
		displayInfo : true,
		displayMsg : '第 {0} - {1} 条  共 {2} 条',
		emptyMsg : "没有记录"
	})
});


var p_guaranteeWay = {    // ViewPort调用的话，这里边的属性就是viewport的属性设置
	id : 'guaranteeWay-panel',
	border : true,
	layout : 'fit',
	items : [grid_guaranteeWay]
};

//Ext.onReady为ext的入口函数，含有此入口的js 在jsp或者html页面中要最后加载进来（要放在最后）！！
Ext.onReady(function(){
    Ext.QuickTips.init();//出错提示信息初始化
    Ext.form.Field.prototype.msgTarget = 'side';//提示信息默认显示位置    
	var vp = new Ext.Viewport(p_guaranteeWay);//新建个viewport，让其填充整个可用区域。
    Ext.get('loading').remove();
});
